<template>
  <div class="app-container">
    <div ref="myMap" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
  name: 'Index',
  data() {
    return {
      toolTipData: [{ name: '中煤木垒', value: 13, areas: [] }],
      geoCoordMap: { 中煤木垒: [90.592082, 44.347759] }
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // json地图数据-需要根据需求下载引入对应名称文件
      let mapJson = require('../jsondata/shenzhneg.json')
      let myChart = echarts.init(this.$refs.myMap)
      myChart.showLoading()
      myChart.hideLoading()
      echarts.registerMap('myMap', mapJson)

      var option = {
        tooltip: {
          // 自定义代码
        },
        series: [
          {
            type: 'map3D',
            name: '地图',
            center: ['10%', '50%'],
            selectedMode: 'single',
            regionHeight: 0,
            map: 'myMap',
            viewControl: {
              distance: 130,
              alpha: 22,
              beta: -20
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: 18,
              fontWeight: 'bold',
              position: 'top',
              rotate: 90,
              align: 'right',
              lineStyle: {
                color: '#fff',
                width: 2,
                type: 'solid'
              },
              formatter(data) {
                if (data.name.includes('乡') || data.name.includes('镇') || data.name.includes('场')) {
                  console.log('大石头乡----------')
                  return ' '
                }
              },
              labelLine: {
                show: true, // 是否显示引导线
                length: 15, // 第一段引导线的长度
                length2: 80, // 第二段引导线的长度
                lineStyle: {
                  color: '#333', // 引导线的颜色
                  width: 1, // 引导线的宽度
                  type: 'solid' // 引导线的类型（solid, dashed, dotted）
                }
              }
            },
            itemStyle: {
              color: function (params) {
                if (params.name == '锦鸿电力木垒') {
                  return '#00adf2' // 如果包含“乡”，则渲染成红色
                } else if (params.name == '中煤木垒') {
                  return '#8dc149'
                } else if (params.name == '新疆华电木垒') {
                  return '#e8ffea'
                } else if (params.name == '新疆华电木垒') {
                  return '#1ba035'
                } else if (params.name == '新疆双杰木垒') {
                  return '#ec1567'
                } else if (params.name == '新疆能源立新术垒') {
                  return '#8f8f8f'
                } else if (params.name == '国家电投木垒') {
                  return 'skyblue'
                } else {
                  return '#27426d' // 否则保持原来的颜色
                }
              },
              borderWidth: 2,
              borderColor: '#61CFF8',
              opacity: 0.92
            },
            emphasis: {
              label: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: '#007EE8',
                borderWidth: 4,
                borderColor: '#8bf7ff'
              }
            },
            light: {
              main: {
                color: '#fff',
                intensity: 1,
                shadow: true,
                shadowQuality: 'high',
                alpha: 25,
                beta: 20
              },
              ambient: {
                color: '#fff',
                intensity: 0.6
              }
            },
            labelLayout: {
              hideOverlap: true,
              moveOverlap: 'shiftY'
            }
          },
          //柱状体的主干
          {
            type: 'lines',
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 100 // 图标大小
            },
            coordinateSystem: 'geo3D',
            lineStyle: {
              width: 6, // 尾迹线条宽度
              color: 'rgba(255,255,255, 0.5)',
              opacity: 1, // 尾迹线条透明度
              curveness: 0 // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: 'end',
              formatter: '300'
            },
            silent: true,
            data: this.lineData()
          }
        ]
      }

      myChart.setOption(option)
      myChart.on('click', async params => {
        // console.log(params)
        if (params.data.name === '中煤木垒') {
          window.location.href = 'http://101.43.164.214:11127/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2'
        }
      })
      window.addEventListener('resize', function () {
        console.log('myChart.resize()', myChart.resize())
        myChart.resize()
      })
    },
    lineData() {
      debugger
      const result = this.toolTipData.map(item => {
        return { coords: [this.geoCoordMap[item.name], [this.geoCoordMap[item.name][0], this.geoCoordMap[item.name][1] + 2]] }
      })
      console.info(result)
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 80%;
  background: transparent;
}
</style>
